<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>二维码授权登录</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">二维码授权登录</div>
                        <div class="layui-card-body">
                            <div id="error"></div>
                            <div id="qrcode_block" style="position: relative;top:30%;left:30%;display: none;">
                                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" id="loading" style="font-size:60px;"></i>
                                <div id="qrcode"></div>
                                <br>
                                <div id="msg"></div>
                                <div id="text"></div>
                                <br>
                                <div>
                                    <a class="layui-btn layui-btn-radius layui-btn-normal" href="../wechat/add_by_qrcode.html" id="refresh" style="display: none;">刷新</a>
                                    <a class="layui-btn layui-btn-radius layui-btn-primary" href="index.html" id="back">返回</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../assets/js/qrcode.min.js"></script>
    <script>
        var refresh = true;
        var sync;
        var qrcode = '';
        var syncId = '';
        layui.use(['form'], function () {
            var $ = layui.$

            var getQrCode = function () {
                service.get("api/v1/wechat/add_by_qrcode")
                    .then((response) => {
                        if (response.code === 200) {
                            var data = response.data;
                            if (!$('#qrcode').html()) {
                                qrcode = new QRCode("qrcode", {
                                    text: data.QrBase64,
                                    width: 200,
                                    height: 200,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                            }
                            syncId = response.data.syncId
                            $('#msg').html('');
                            $('#text').html('请使用手机微信扫描二维码');
                            $('#qrcode_block').css('display', 'block');
                            $('#loading').css('display', 'none');
                            refresh_page();
                        } else {
                            layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                        }
                    }).catch((err) => {
                    layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                })
            }

            // 获取二维码
            getQrCode()

            // 每隔一分钟重新刷新界面
            var refresh_qrcode = function () {
                setTimeout(getQrCode, 60000);
            };

            refresh_qrcode()

            sync = function () {
                var post = {
                    page: 1,
                    limit: 10
                };
                service.get("api/v1/wechat/sync_qrcode/" + syncId)
                    .then((response) => {
                        if (response.code === 200) {
                            refresh = false;
                            $('#qrcode').html('');
                            $('#msg').html('<i class="layui-icon layui-icon-auz" style="font-size:40px;color: #00CC00;"></i>' + '授权成功，正在登录...');
                            $('#text').html('');
                            $('#qrcode_block').css('display', 'block');
                            $('#loading').css('display', 'none');
                            setTimeout(function () {
                                window.location.href = '../wechat/index.html';
                            }, 3000);
                        }
                        else {
                            layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                        }
                    }).catch((err) => {
                    layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                })
            };

            var refresh_page = function () {
                sync();
                if (refresh) {
                    setTimeout(refresh_page, 1000);
                }
            };
        })
    </script>
</div>
</body>
</html>
